<template>
  <div class="home-container">
    <el-tabs v-model="currentTab" class="project-tabs">
      <el-tab-pane v-for="item in itemList" :key="item.path" :label="item.title" :name="item.path" />
    </el-tabs>
    <keep-alive :include="includeComponents">
      <component :is="currentComponent" :is-sub="isSub" @noticeRefresh="freshComponents" />
    </keep-alive>
  </div>
</template>

<script>
import Header from './public/header'
import projectInfo from '@/views/project/projectInfo'
import humanRes from '@/views/project/humanRes'
import projectSub from '@/views/project/projectSub'
import projectKanBan from '@/views/project/projectKanBan'
import projectSubKanBan from '@/views/project/projectKanBan'
import projectReviewPlanning from './ProjectReviewPlanning'
import scheduleManagement from './scheduleManagement'
const includeComponents = ['ProjectInfo', 'ProjectResource', 'ProjectSub']
export default {
  name: 'Home',
  components: {
    Header, projectInfo, humanRes, projectSub, projectKanBan, projectSubKanBan, projectReviewPlanning, scheduleManagement
  },
  data() {
    return {
      includeComponents: [...includeComponents],
      itemList: [
        { path: 'projectInfo', title: '项目信息' },
        { path: 'scheduleManagement', title: '进度管理（内测）' },
        { path: 'humanRes', title: '人力资源' },
        { path: 'projectSub', title: '子项信息' },
        { path: 'projectReviewPlanning', title: '模型审查' },
        { path: 'projectKanBan', title: '项目看板' },
        { path: 'projectSubKanBan', title: '子项看板' }
      ],
      currentTab: this.$route.query.cname || 'projectInfo'
    }
  },
  computed: {
    currentComponent() {
      return this.currentTab
    },
    isSub() {
      return this.currentTab === 'projectSubKanBan'
    }
  },
  watch: {
    currentTab: {
      immediate: true,
      handler: function(val) {
        if (val && this.$route) {
          this.$router.replace({
            path: this.$route.path,
            query: { ...this.$route.query, cname: val }
          })
        } else {
          try {
            this.$router.replace({
              path: this.$route.path,
              query: { }
            })
          } catch (e) {
            console.error(e)
          }
        }
      }
    }
  },
  created() {
    if (localStorage.getItem('projectObject') && !this.$store.state.app.currntProject) {
      this.$store.commit('app/SET_CURRENT_PROJECT', JSON.parse(localStorage.getItem('projectObject')))
    }
    /* console.log('this.route.query', this.$route.query)
    if (this.$route.query?.cname) {
      const routName = this.$route.query.cname
      const paths = this.itemList.map(item => item.path)
      if (paths.includes(routName)) {
        this.currentTab = routName
        /!* this.$router.replace({
          path: this.$route.path,
          query: {}
        })*!/
      }
    }*/
  },
  methods: {
    freshComponents() {
      this.includeComponents = []// 子项策划不会影响其他Tab
      this.$nextTick(() => {
        this.includeComponents = [...includeComponents]
      })
    }
  }
}
</script>
<style lang="scss" scoped>
  .project-tabs{
    margin-bottom:10px;
    ::v-deep .el-tabs__nav{
      width: 440px;
      margin: 10px 0 0;
      float: none;
    }
  }
.home-container{
  padding: 0 20px 20px 20px;
  background-color: #fff;
}
</style>
<style>
  body{
    scrollbar-width:none;
  }
  #app{
    scrollbar-width:none;
  }
</style>
